<template>
  <div class="login-container">
    <!-- 添加头像组件 -->
    <div class="avatar-group">
      <el-avatar :icon="UserFilled" class="avatar-circle" />
      <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" class="avatar-circle" />
      <el-avatar>user</el-avatar>
    </div>

    <form>
      <div class="form-group">
        <label for="username" class="label">用户名:</label>
        <input type="text" id="username" v-model="username" required class="input" />
      </div>
      <div class="form-group">
        <label for="password" class="label">密码:</label>
        <input type="password" id="password" v-model="password" required class="input" />
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-login" @click="login">登录</button>
        <button type="button" class="btn btn-register" @click="register">注册</button>
      </div>
    </form>
  </div>
</template>

<script setup lang="ts">
import { UserFilled } from '@element-plus/icons-vue';
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

let username = ref('');
let password = ref('');
let router = useRouter();

let login = () => {
  const params = new URLSearchParams();
  params.append('username', username.value);
  params.append('password', password.value);

  axios
    .post('/produce-api/path/login', params, {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
    })
    .then(response => {
      if (response.data.code == 200) {
        alert('登录成功');
        router.push('/mulu');
      } else {
        alert(`登录失败: ${response.data.msg}`);
      }
    })
    .catch(error => {
      console.error('登录失败，错误信息:', error);
      alert('登录失败，请稍后重试');
    });
};

const register = () => {
  router.push('/register');
};
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 90px;
  background-image: url('../assets/img/beijing.jpg');
  background-size: cover; /* 让图片铺满容器 */
  background-repeat: no-repeat; /* 图片不重复 */
  background-position: center;
}

.avatar-group {
  display: flex;
  gap: 10px; /* 设置头像之间的间距 */
  margin-bottom: 20px; /* 设置头像组与表单之间的间距 */
}
.avatar-circle {
  border-radius: 50%; /* 将头像设置为圆形 */
  overflow: hidden; /* 确保圆形剪裁效果 */
}
.page-title {
  text-align: center;
  color: #fff;
  font-size: 70px; /* 可根据需求调整字体大小 */
  font-weight: bold;
  font-family: "宋体";
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px; /* 占据父容器高度，便于垂直居中 */
  width: 100%;
  position: relative;
  bottom: 120px; /* 占据父容器宽度，便于水平居中 */
}

form {
  background-color: rgba(255, 255, 255, 0.8); /* 修改为带有透明度的白色 */;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  width: 500px;
}

.form-group {
  margin-bottom: 30px;
}

.label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 20px;
  color: #678497;
}

.input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 18px;
}

.btn-group {
  display: flex;
  gap: 10px;
}

.btn {
  flex: 1;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.btn-login {
  background-color: #007bff;
}

.btn-register {
  background-color: #28a745;
}

.btn:hover {
  opacity: 0.8;
}
</style>